<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>   
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta charset="UTF-8">
		<title>活动列表</title>
		<link rel="stylesheet" href="${BASE_PATH}/static/app/css/reset.css" />
		<style>
			body{
				background:#FAFAFA ;
				padding: 1rem;
			}
			.warp{
				background: #fff;
			    border-radius: 5px;
			    padding: 1rem;
			    padding-top: 0;
			    font-size: .9rem;
			    box-shadow: 0px 0px 14px #dcdfe0;
			    margin-bottom: 1.3rem;
			    position: relative;
			}
			.warp img{
				width: 100%;
			    height: 7.6rem;
			    border-radius: 5px;
			}
			.warp p{
				    margin-top: .8rem;
			    margin-bottom: 2rem;
			    color: #646464;
			    display: -webkit-box;
			    -webkit-box-orient: vertical;
			    -webkit-line-clamp: 3;
			    overflow: hidden;
			    line-height: 1.1rem;
			    font-size: 14px;
			}
			.warp a{
				position: absolute;
				right: 1rem;
				bottom: 1rem;
				font-size: 14px;
			}
			.warp h3{
				font-size: 18px;
			    font-weight: 100;
			    color: #323232;
			    padding: .8rem 0;
			}
			.on{
			  color:#8ed1d8;
			}
			.warp-box{
				width: 100%;
			    height:100%;
			    overflow: hidden;
			    border-radius: 6px;
			    position: relative;
			}
			.warpno{
				position: absolute;
				top: 0;
				width: 100%;
			    height:100%;
			    background:rgba(117, 116, 116, 0.64);
			    z-index: 2;			
			    line-height: 8rem;
			    text-align: center;
			    color: #fff;
			}
			.warpno-color h3,.warpno-color p,.warpno-color a{
				color:#b8b8b8;
			}
		</style>
	</head>

	<body>
		<c:forEach var="doList" items="${doingList}" varStatus="s">
			<c:choose>
	                      <c:when test="${doList.isClose != 1}">  
	                         <div class="warp">
								<h3>${doList.title}</h3>
								<img src="${FTP_PATH}${doList.thumb }" />
								<p>${doList.content}</p>
								<a class="on" href="${doList.link}">查下看详情 >></a>
							</div>   
							              
	                       </c:when>
	                      <c:otherwise>  
	                          <div class="warp warpno-color">
								<h3>${doList.title}</h3>
								<div class="warp-box">
								   <img src="${FTP_PATH}${doList.thumb }" />
								   <div class="warpno">活动结束</div>    
								</div>
								
								<p>${doList.content}</p>
								<a>查下看详情 >></a>
								
						</div>
					</c:otherwise>				  
				 </c:choose>			
		</c:forEach>
	
	</body>

</html>